import React, {Component} from 'react';
import {InputNumber, Slider, Row, Col} from 'antd';
import './index.css';

class SlideInput extends Component {

    constructor(props) {
        super(props);
        const {defaultValue, value} = this.props;

        this.state = {
            inputValue: value || defaultValue || 0
        };
    }

    componentWillReceiveProps(nextProps) {
        const {value} = nextProps;

        this.setState({
            inputValue: value
        });
    }

    render() {
        const props = this.props;
        var {inputValue} = this.state;

        return (
            <Row className="slideInput">
                <Col span={14}>
                    <Slider {...props} onChange={this._change.bind(this)} value={inputValue}/>
                </Col>
                <Col span={10}>
                    <InputNumber
                        {...props}
                        style={{marginLeft: 16}}
                        value={inputValue}
                        onChange={this._change.bind(this)}
                    />
                </Col>
            </Row>
        );
    }

    _change(value) {
        this.setState({
            inputValue: value,
        });
        this.props.onChange && this.props.onChange(value);
    }
}

export default SlideInput;

